import React, { useMemo} from 'react'
import ContentBox from './ContentBox'
import { getArticles } from './fake-api'
import { withRouter } from 'react-router'
import { useHistory } from 'react-router-dom'
import axios from 'axios'
function Set({a:fn}){
    const history = useHistory()
    // eslint-disable-next-line
    const memo = useMemo(()=>{
        const height = history.page
        // console.log(history)
        async function a(){
            // const a = new Promise()
            document.documentElement.scrollTop=height
        }
        if(history.index===1)
            {a();history.index=0;}
        else 
            {document.documentElement.scrollTop=0;}
    },[history])
    return <div></div>
}

class ArticleList extends React.Component{
    constructor(props){
        super(props)
        this.state={
        total:[],
        height:300,
        page:0,
        sort:this.props.location.search?'new':'hot'
        }
        // this.handleScroll = this.handleScroll.bind(this)
    }
    
    componentDidMount=async()=>{
        // if(this.props.location.search){
        //     const a = this.props.location.search.split('=')[1]
        //     this.setState({
        //         sort:a
        //     })
        //     this.forceUpdate()
        //     console.log(1)
        // }
        // // window.location.reload(1)
        const data1 = await getArticles(this.props.CategoriesId,this.state.sort,this.state.page*10,10) 
        // console.log(data1)
        await this.setState({
            total:this.state.total.concat(data1.data.articles),
            page:++this.state.page
        })
    }
    // shouldComponentUpdate(){
    //     if(this.props.location.search&&this.state.sort==='new')
    //     {
    //         console.log(11)
    //     // window.location.reload()
    //     return true}
    //     else
    //         return true
    // }
  
    componentWillMount(){   
        window.addEventListener('scroll', this.handleScroll)
    }

    componentWillUnmount(){
        window.removeEventListener('scroll',this.handleScroll)
    }

    getMore=async()=>{
        const data1 = await getArticles(this.props.CategoriesId,this.state.sort,this.state.page*10,10) 
        await this.setState({
            total:this.state.total.concat(data1.data.articles),
            page:++this.state.page
        })
        return data1
    }
    handleClick=async(Id)=>{
        let time = (new Date(new Date()).getTime()/1000).toFixed(0)
        const data = await axios.post('https://qc6d2t.fn.thelarkcloud.com/storageHistory',{id:Id,time:time}).catch(error=>console.log(error))
        return data
    }
    render(){
        return(
            <div>
            <Set />

            <div onScroll={()=>this.handleScroll()} className='list'>
                {
                   this.state.total.map((i,index)=>{
                        return <div key={index} onClick={()=>this.handleClick(i.article_id)}><ContentBox ArticleBrief={i}/></div>
                   })
                   
                }
            </div>
            </div>
        )
    }
    
    handleScroll=()=> {
        let a = document.documentElement.scrollHeight-window.innerHeight
        let b = document.documentElement.scrollTop
        if(b===a)
        {
            this.getMore()
        }
      }

}

// export function ArticleList({CategoriesId:Id}) {
//     const [total,setTotal] =useState()
//     const [page,setPage]= useState(0)
//     useEffect(()=>{
//         // const list = document.getElementsByClassName('list')[0]
//         const list =document.getElementById('root')
//         // const list = document.documentElement
//         async function init() {
//             const data = await getArticles(Id,'hot',page*10,20)
//             setTotal(data.data.articles)
//             setPage(e=>e+1)
//         }
//         if(page===0)
//         init()
//         async function getMore() {
//             const data = await getArticles(Id,'hot',page*10,10)
//             setTotal(e=>e.concat(data.data.articles))
//             setPage(e=>e+1)
//         }
        
//         function name() {
//             console.log(1)   
//         }
        
//         list.addEventListener('scroll',name)
//         return()=>{
//             list.removeEventListener('scroll',name)
//         }
//     },)
//     function handleScroll() {
//         let a = document.documentElement.scrollHeight-812
//         let b = document.documentElement.scrollTop
//         console.log(a)
//         if(b===a)
//            console.log(1)
//     }
//     return(
//         <div  onScroll={()=>handleScroll()} className='list'>
//             {total?
//                 total.map((i,index)=>{
//                     return <div key={index}><ContentBox ArticleBrief={i}/></div>
//                 })
//                 :''
//             }
//         </div>
//     )
// }

export default withRouter(ArticleList)